<template>
	<view>
		<view class="body">
			<view class="top">
				<view class="inputInfo">
					<view class="inputIcon">
						   <u-icon name="search" color="#979797" size="32"></u-icon>
					</view>
					<view class="inputHtml">
						<input type="text" value="" placeholder="请输入菜品名称" />
					</view>
				</view>
			</view>
			<view class="but">
				<view class="txtLeft" style="background: #F6F7FA;">
					<view class="goodsTypeName">
						<view class="goodsTypeNameTxt" style="border-left: #50A8F2 solid 6rpx;">
							时令蔬菜1
						</view>
					</view>
					<view class="goodsTypeName" style="background: #F6F7FA;">
						<view class="goodsTypeNameTxt">
							绿菜叶
						</view>
					</view>
					<view class="goodsTypeName" style="background: #F6F7FA;">
						<view class="goodsTypeNameTxt">
							豆制品
						</view>
					</view>
					<view class="goodsTypeName" style="background: #F6F7FA;">
						<view class="goodsTypeNameTxt">
							菌类
						</view>
					</view>
					<view class="goodsTypeName" v-for="(item,index) in 20" style="background: #F6F7FA;">
						<view class="goodsTypeNameTxt">
							猪肉
						</view>
					</view>
				</view>
				<view class="txtRight">
					<view class="goodsinfos" v-for="(item,index) in 100">
						<view class="infoImage">
							<image src="../../static/pic2.jpg" mode=""></image>
						</view>
						<view class="infoTxts">
							<view class="Txts1">
								寿光刺黄瓜
							</view>
							<view class="Txts2">
								500g
							</view>
							<view class="Txts3">
								<view class="lettTxt">
									<u-icon name="rmb" color="#FF5951" size="24"></u-icon>
									6.99
								</view>
								<view class="rightTxt">
									<view class="jian">-</view>
									<view class="num">10</view>
									<view class="jia">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style lang="scss" scoped>
.body{
	background: #fff;width: 100%;height: 100%;display: flex;flex-direction: column;position: absolute;
	.top{
		height: 100rpx;background: #FFF;height: 100rpx;
		
		.inputInfo{margin-top: 25rpx;border-radius: 30px;
			margin-left: 20rpx;margin-right: 20rpx;height: 64rpx;background:#F6F7FA;
			display: flex;
			.inputIcon{
				width: 50rpx;height: 100%;//background: red;
				.u-icon{
					margin-top: 14rpx;margin-left: 20rpx;
				}
			}
			.inputHtml{
				flex: 1;
				input{//background: green;
					padding-left: 14rpx;line-height: 60rpx;
					height: 60rpx;width: 100%;color: #999;font-size: 26rpx;
				}
				
			}
		}
		
	}
	.but{overflow-y: auto;flex: 1;width: 100%;height: 100%;display: flex;
		.txtLeft{
			width: 185rpx;overflow-y: auto;overflow-x: hidden;
			.goodsTypeName{
				height: 100rpx;background: #FFF;overflow: hidden;
				.goodsTypeNameTxt{height: 60rpx;margin-top: 16rpx;//background: red;
					text-align: center;line-height: 60rpx;
					color: #333333;font-size: 28rpx;font-weight: 500;
				}
			}
		}
		.txtRight{
			flex: 1;background: #e3e3e3;overflow-y: auto;overflow-x: hidden;
			.goodsinfos{background: #FFF;height: 160rpx;display: flex;
				.infoTxts{flex: 1;//background: yellow;
					.Txts3{display: flex;margin-top: 14rpx;
						.lettTxt{font-size: 32rpx;color: #FF641F;
							flex: 1;padding-left: 20rpx;
						}
						.rightTxt{padding-right: 40rpx;
							flex: 1;display: flex;justify-content: flex-end;
							.jian{line-height: 34rpx;border-radius: 50%;color: #B1B1B1;
								height: 38rpx;width: 38rpx;background: #F0F0F0;text-align: center;
							}
							.num{color: #2D2D2D;font-size: 30rpx;
								width: 50rpx;height: 38rpx;text-align: center;
							}
							.jia{
								line-height: 34rpx;border-radius: 50%;color: #FFF;
									height: 38rpx;width: 38rpx;background: #5EAFF4;text-align: center;
							}
						}
					}
					.Txts2{margin-top: 17rpx;
						color: #999999;font-size: 22rpx;padding-left: 20rpx;
					}
					.Txts1{margin-top: 10rpx;
						color: #333333;font-size: 30rpx;padding-left: 20rpx;
					}
				}
				.infoImage{
					image{margin-top: 20rpx;margin-left: 10rpx;
						width: 120rpx;height: 120rpx;border-radius: 8rpx;
					}
				}
			}
		}
	}
}
</style>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>


